<!-- src/layouts/AccountLayout.vue -->

<script setup lang="ts">
import MainNav from "./components/MainNav.vue";
import { Card, CardContent, } from "@/components/ui/card";
const navItems = [
  { name: "登录密码", path: "/account/information/password" },
  { name: "绑定手机", path: "/account/information/phone" },
  { name: "绑定邮箱", path: "/account/information/email" },
  { name: "账号绑定", path: "/account/information/linked-accounts" },
];
</script>

<template>
  <div class="flex min-h-screen w-full flex-col">
    <MainNav />
    <main class="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
      <div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[120px_1fr] lg:grid-cols-[200px_1fr]">
        <Card>
          <CardContent class="pt-6">
            <nav class="grid gap-4 text-sm text-muted-foreground">
              <ul class="space-y-2">
                <li v-for="item in navItems" :key="item.path" class="text-center">
                  <router-link :to="item.path" class="block px-4 py-2 rounded-md transition-colors" :class="{
                    'font-bold bg-blue-500 text-white': $route.path === item.path,
                    'hover:bg-blue-100': $route.path !== item.path,
                  }">
                    {{ item.name }}
                  </router-link>
                </li>
              </ul>
            </nav>
          </CardContent>
        </Card>
        <div class="grid gap-6">
          <router-view></router-view>
        </div>
      </div>
    </main>
  </div>
</template>
